<template>
  <div class="flex flex-col h-full">
    <Spin :spinning="spinning">
      <div class="flex justify-center">
        <Select
          style="width: 160px"
          :options="yearsList"
          v-model:value="year"
          @change="handleYearChange"
        />
        <!-- <div class="ml-2 flex items-center">
          <div
            class="cursor-pointer hover:text-red-400 ml-2"
            :class="{ 'text-red-400': month == item.value }"
            v-for="item in monthList"
            :key="item.value"
            @click="handleMonthClick(item.value)"
          >
            {{ item.label }}
          </div>
        </div> -->
      </div>
    </Spin>
    <ScrollContainer class="pr-4">
      <div class="flex-1">
        <div class="mb-5" v-for="(item, index) in dataRef?.list" :key="index">
          <div class="w-full text-center mt-2 mb-2 text-lg">
            {{ dataRef.title }} {{ index + 1 }} 月份
          </div>
          <EfficiencyAnalysisChart :dataSource="item" :title="dataRef.title" height="230px" />
        </div>
      </div>
    </ScrollContainer>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, unref, nextTick } from 'vue';
  import dayjs from 'dayjs';
  import { Select, Spin } from 'ant-design-vue';
  import EfficiencyAnalysisChart from './modules/EfficiencyAnalysisChart.vue';
  import { ScrollContainer } from '/@/components/Container';

  import { getFlowGetAnalysisYear } from '/@/api/flowManage/flowManage';

  const props = defineProps({
    currentRecord: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  const spinning = ref(false);
  const month = ref<any>(dayjs().format('MM'));
  const monthList = ref<{ label: string; value: number }[]>([]);
  const year = ref<any>(dayjs().format('YYYY'));
  const yearsList = ref<{ label: number; value: number }[]>([]);
  const getYearsList = async () => {
    yearsList.value = [];
    for (let i = 0; i < 60; i++) {
      const num = unref(year) - 0 - i;
      yearsList.value.push({
        value: num,
        label: num,
      });
    }
    // for (let i = 1; i <= 12; i++) {
    //   monthList.value.push({
    //     value: i,
    //     label: `${i}月`,
    //   });
    // }
  };
  const title = ref('效率分析');
  const dataRef = ref<Recordable>({});
  const fetch = async () => {
    try {
      await nextTick();
      const params = {
        typeCode: unref(props.currentRecord.code),
        year: unref(year),
      };
      spinning.value = true;
      dataRef.value = await getFlowGetAnalysisYear(params);
      title.value = unref(dataRef).title;
      spinning.value = false;
    } catch (err) {
      console.log('month', err);
    } finally {
      spinning.value = false;
    }
  };

  onMounted(async () => {
    await getYearsList();
    fetch();
  });

  const handleMonthClick = (value) => {
    month.value = value;
    fetch();
  };

  const handleYearChange = () => {
    fetch();
  };
</script>
